<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        v-for="(item, index) in treeTypeList"
        :key="index"
        :label="item.label"
        :name="String(index)"
      >
        <div class="el-card__header">
          <el-tag
            v-for="itemChild in item.children"
            :key="itemChild.label"
            effect="dark"
            size="medium"
            style="margin: 0 10px"
          >
            {{ itemChild.label }}
          </el-tag>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-row :gutter="10" class="panel-group">
      <el-col
        :xs="24"
        :sm="8"
        :md="8"
        :lg="6"
        :xl="4"
        class="card-panel-col"
        v-for="item in spreadList"
        :key="item.id"
      >
        <div class="list">
          <div class="item">
            <div class="img">
              <img class="img-item" :src="item.activeImg" />
            </div>
            <div class="content">
              <div class="title">{{ item.activeTitle }}</div>
              <div class="desc">
                <div class="desc-item">
                  <div class="desc-item-title">{{ item.commissionRate }}</div>
                  <div class="desc-item-content">佣金比率</div>
                </div>
                <div class="desc-item">
                  <div class="desc-item-title">{{ item.settlementTime }}</div>
                  <div class="desc-item-content">结算周期</div>
                </div>
                <div class="desc-item">
                  <div class="desc-item-title">{{ item.settlementCycle }}</div>
                  <div class="desc-item-content">结算时间</div>
                </div>
              </div>
            </div>
            <div class="btn">
              <div class="bottom bottom-left">活动说明</div>
              <div class="bottom bottom-right" @click="handExtension">
                我要推广
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <!-- <el-col :xs="24" :sm="8" :md="8" :lg="4" :xl="4" class="card-panel-col">
        <div class="list">
          <div class="item">
            <div class="img">
              <img
                class="img-item"
                src="https://img.jutuike.com/taokeout/banner/didi_dache_daijia_banner.png"
              />
            </div>
            <div class="content">
              <div class="title">网约车&代驾CPA+CPS活动</div>
              <div class="desc">
                <div class="desc-item">
                  <div class="desc-item-title">最高16元</div>
                  <div class="desc-item-content">佣金比率</div>
                </div>
                <div class="desc-item">
                  <div class="desc-item-title">月结</div>
                  <div class="desc-item-content">结算周期</div>
                </div>
                <div class="desc-item">
                  <div class="desc-item-title">次月20号</div>
                  <div class="desc-item-content">结算时间</div>
                </div>
              </div>
            </div>
            <div class="btn">
              <div class="bottom bottom-left">活动说明</div>
              <div class="bottom bottom-right">我要推广</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="8" :md="8" :lg="4" :xl="4" class="card-panel-col">
        <div class="list">
          <div class="item">
            <div class="img">
              <img
                class="img-item"
                src="https://img.jutuike.com/taokeout/banner/didi_dache_daijia_banner.png"
              />
            </div>
            <div class="content">
              <div class="title">网约车&代驾CPA+CPS活动</div>
              <div class="desc">
                <div class="desc-item">
                  <div class="desc-item-title">最高16元</div>
                  <div class="desc-item-content">佣金比率</div>
                </div>
                <div class="desc-item">
                  <div class="desc-item-title">月结</div>
                  <div class="desc-item-content">结算周期</div>
                </div>
                <div class="desc-item">
                  <div class="desc-item-title">次月20号</div>
                  <div class="desc-item-content">结算时间</div>
                </div>
              </div>
            </div>
            <div class="btn">
              <div class="bottom bottom-left">活动说明</div>
              <div class="bottom bottom-right">我要推广</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="8" :md="8" :lg="4" :xl="4" class="card-panel-col">
        <div class="list">
          <div class="item">
            <div class="img">
              <img
                class="img-item"
                src="https://img.jutuike.com/taokeout/banner/didi_dache_daijia_banner.png"
              />
            </div>
            <div class="content">
              <div class="title">网约车&代驾CPA+CPS活动</div>
              <div class="desc">
                <div class="desc-item">
                  <div class="desc-item-title">最高16元</div>
                  <div class="desc-item-content">佣金比率</div>
                </div>
                <div class="desc-item">
                  <div class="desc-item-title">月结</div>
                  <div class="desc-item-content">结算周期</div>
                </div>
                <div class="desc-item">
                  <div class="desc-item-title">次月20号</div>
                  <div class="desc-item-content">结算时间</div>
                </div>
              </div>
            </div>
            <div class="btn">
              <div class="bottom bottom-left">活动说明</div>
              <div class="bottom bottom-right">我要推广</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="8" :md="8" :lg="4" :xl="4" class="card-panel-col">
        <div class="list">
          <div class="item">
            <div class="img">
              <img
                class="img-item"
                src="https://img.jutuike.com/taokeout/banner/didi_dache_daijia_banner.png"
              />
            </div>
            <div class="content">
              <div class="title">网约车&代驾CPA+CPS活动</div>
              <div class="desc">
                <div class="desc-item">
                  <div class="desc-item-title">最高16元</div>
                  <div class="desc-item-content">佣金比率</div>
                </div>
                <div class="desc-item">
                  <div class="desc-item-title">月结</div>
                  <div class="desc-item-content">结算周期</div>
                </div>
                <div class="desc-item">
                  <div class="desc-item-title">次月20号</div>
                  <div class="desc-item-content">结算时间</div>
                </div>
              </div>
            </div>
            <div class="btn">
              <div class="bottom bottom-left">活动说明</div>
              <div class="bottom bottom-right">我要推广</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="8" :md="8" :lg="4" :xl="4" class="card-panel-col">
        <div class="list">
          <div class="item">
            <div class="img">
              <img
                class="img-item"
                src="https://img.jutuike.com/taokeout/banner/didi_dache_daijia_banner.png"
              />
            </div>
            <div class="content">
              <div class="title">网约车&代驾CPA+CPS活动</div>
              <div class="desc">
                <div class="desc-item">
                  <div class="desc-item-title">最高16元</div>
                  <div class="desc-item-content">佣金比率</div>
                </div>
                <div class="desc-item">
                  <div class="desc-item-title">月结</div>
                  <div class="desc-item-content">结算周期</div>
                </div>
                <div class="desc-item">
                  <div class="desc-item-title">次月20号</div>
                  <div class="desc-item-content">结算时间</div>
                </div>
              </div>
            </div>
            <div class="btn">
              <div class="bottom bottom-left">活动说明</div>
              <div class="bottom bottom-right">我要推广</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="8" :md="8" :lg="4" :xl="4" class="card-panel-col">
        <div class="list">
          <div class="item">
            <div class="img">
              <img
                class="img-item"
                src="https://img.jutuike.com/taokeout/banner/didi_dache_daijia_banner.png"
              />
            </div>
            <div class="content">
              <div class="title">网约车&代驾CPA+CPS活动</div>
              <div class="desc">
                <div class="desc-item">
                  <div class="desc-item-title">最高16元</div>
                  <div class="desc-item-content">佣金比率</div>
                </div>
                <div class="desc-item">
                  <div class="desc-item-title">月结</div>
                  <div class="desc-item-content">结算周期</div>
                </div>
                <div class="desc-item">
                  <div class="desc-item-title">次月20号</div>
                  <div class="desc-item-content">结算时间</div>
                </div>
              </div>
            </div>
            <div class="btn">
              <div class="bottom bottom-left">活动说明</div>
              <div class="bottom bottom-right">我要推广</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="8" :md="8" :lg="4" :xl="4" class="card-panel-col">
        <div class="list">
          <div class="item">
            <div class="img">
              <img
                class="img-item"
                src="https://img.jutuike.com/taokeout/banner/didi_dache_daijia_banner.png"
              />
            </div>
            <div class="content">
              <div class="title">网约车&代驾CPA+CPS活动</div>
              <div class="desc">
                <div class="desc-item">
                  <div class="desc-item-title">最高16元</div>
                  <div class="desc-item-content">佣金比率</div>
                </div>
                <div class="desc-item">
                  <div class="desc-item-title">月结</div>
                  <div class="desc-item-content">结算周期</div>
                </div>
                <div class="desc-item">
                  <div class="desc-item-title">次月20号</div>
                  <div class="desc-item-content">结算时间</div>
                </div>
              </div>
            </div>
            <div class="btn">
              <div class="bottom bottom-left">活动说明</div>
              <div class="bottom bottom-right">我要推广</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="8" :md="8" :lg="4" :xl="4" class="card-panel-col">
        <div class="list">
          <div class="item">
            <div class="img">
              <img
                class="img-item"
                src="https://img.jutuike.com/taokeout/banner/didi_dache_daijia_banner.png"
              />
            </div>
            <div class="content">
              <div class="title">网约车&代驾CPA+CPS活动</div>
              <div class="desc">
                <div class="desc-item">
                  <div class="desc-item-title">最高16元</div>
                  <div class="desc-item-content">佣金比率</div>
                </div>
                <div class="desc-item">
                  <div class="desc-item-title">月结</div>
                  <div class="desc-item-content">结算周期</div>
                </div>
                <div class="desc-item">
                  <div class="desc-item-title">次月20号</div>
                  <div class="desc-item-content">结算时间</div>
                </div>
              </div>
            </div>
            <div class="btn">
              <div class="bottom bottom-left">活动说明</div>
              <div class="bottom bottom-right">我要推广</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="8" :md="8" :lg="4" :xl="4" class="card-panel-col">
        <div class="list">
          <div class="item">
            <div class="img">
              <img
                class="img-item"
                src="https://img.jutuike.com/taokeout/banner/didi_dache_daijia_banner.png"
              />
            </div>
            <div class="content">
              <div class="title">网约车&代驾CPA+CPS活动</div>
              <div class="desc">
                <div class="desc-item">
                  <div class="desc-item-title">最高16元</div>
                  <div class="desc-item-content">佣金比率</div>
                </div>
                <div class="desc-item">
                  <div class="desc-item-title">月结</div>
                  <div class="desc-item-content">结算周期</div>
                </div>
                <div class="desc-item">
                  <div class="desc-item-title">次月20号</div>
                  <div class="desc-item-content">结算时间</div>
                </div>
              </div>
            </div>
            <div class="btn">
              <div class="bottom bottom-left">活动说明</div>
              <div class="bottom bottom-right">我要推广</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="8" :md="8" :lg="4" :xl="4" class="card-panel-col">
        <div class="list">
          <div class="item">
            <div class="img">
              <img
                class="img-item"
                src="https://img.jutuike.com/taokeout/banner/didi_dache_daijia_banner.png"
              />
            </div>
            <div class="content">
              <div class="title">网约车&代驾CPA+CPS活动</div>
              <div class="desc">
                <div class="desc-item">
                  <div class="desc-item-title">最高16元</div>
                  <div class="desc-item-content">佣金比率</div>
                </div>
                <div class="desc-item">
                  <div class="desc-item-title">月结</div>
                  <div class="desc-item-content">结算周期</div>
                </div>
                <div class="desc-item">
                  <div class="desc-item-title">次月20号</div>
                  <div class="desc-item-content">结算时间</div>
                </div>
              </div>
            </div>
            <div class="btn">
              <div class="bottom bottom-left">活动说明</div>
              <div class="bottom bottom-right">我要推广</div>
            </div>
          </div>
        </div>
      </el-col> -->
    </el-row>
    <el-drawer title="立即推广" :visible.sync="drawer" :with-header="false">
      <span>立即推广</span>
      <div>
        <div>渠道表示：</div>
        <el-autocomplete
          class="inline-input"
          v-model="state1"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          @select="handleSelect"
        ></el-autocomplete>
      </div>
      <h1>微信小程序</h1>
    </el-drawer>
  </div>
</template>

<script>
import { getTreeTypeList } from "@/api/alipay/spread";
import { getCpsActivityPage } from "@/api/alipay/spread";
export default {
  name: "NamesIndex",

  data() {
    return {
      activeName: "",
      treeTypeList: [],
      spreadList: [],
      drawer: false,
      state1: "",
    };
  },
  created() {
    this.getList();
    this.getSpreadData();
  },
  methods: {
    // 获取tree树列表
    async getList() {
      const { data } = await getTreeTypeList();
      this.treeTypeList = data;
    },
    handleClick() {},
    // 获取推广数据
    getSpreadData() {
      this.loading = true;
      // 执行查询
      getCpsActivityPage(this.queryParams).then((response) => {
        console.log(response);
        this.spreadList = response.data.list;
        // this.total = response.data.total;
        // this.loading = false;
      });
    },
    handExtension() {
      this.drawer = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.card-panel-col {
  // margin-bottom: 24px;
  display: flex;
}
.list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;

  .item {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 24px;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.15);
    // width: 260px;

    .img {
      height: 124px;
      .img-item {
        width: 100%;
        height: 100%;
      }
    }
  }

  .content {
    padding: 0 24px;
    padding: 20px 24px 0 24px;
    .title {
      font-size: 14px;
      font-weight: 600;
      color: #333;
    }
    .desc {
      padding-top: 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .desc-item {
        text-align: center;
        .desc-item-title {
          margin-bottom: 8px;
          font-size: 12px;
          color: #ff4343;
        }
        .desc-item-content {
          font-size: 12px;
          color: #bbb;
        }
      }
    }
  }

  .btn {
    padding-top: 30px;
    display: flex;
    border-radius: 0 0 8px 8px;
    .bottom {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      height: 46px;
      font-size: 14px;
      color: #fff;
      cursor: pointer;
      background-color: #3183ff;
    }
  }
}
</style>
